<template>
  
  <div class="goods-page-bg">
    <el-breadcrumb :separator-icon="ArrowRight" style="margin-bottom: 20px; ">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Goods' }">货品列表</el-breadcrumb-item>
    <el-breadcrumb-item>新增货品</el-breadcrumb-item>
  
  </el-breadcrumb>
  <!-- 查询框 -->
    <el-card class="form-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="货品名称">
          <el-input
            v-model="formInline.name"
            placeholder="请输入货品名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="货品状态">
          <el-select
            v-model="formInline.status"
            placeholder="请选择货品状态"
            clearable
            style="width:150px"
          >
            <el-option label="待入库" :value="1" />
            <el-option label="已入库" :value="2" />
            <el-option label="已出库" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select
            v-model="formInline.customid"
            placeholder="请选择供应商"
            clearable
            style="width: 150px"
          >
           <el-option
                  v-for="item in goodsVendorList"
                  :value="item.wVendorcoding"  :label="item.wVendorname"
                />
          </el-select>
        </el-form-item>
        <el-form-item label="供货日期">
          <el-date-picker
            v-model="formInline.createtime"
            type="date"
            placeholder="选择供货日期"
            clearable
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="货品生产日期">
          <el-date-picker
            v-model="formInline.productime"
            type="date"
            placeholder="选择生产日期"
            clearable
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getdata">
            <i class="el-icon-search"></i> 查询
          </el-button>
          <el-button type="success" @click="Add">
            <i class="el-icon-plus"></i> 新增货品
          </el-button>
          <el-button type="info" @click="goToAllocate">
            <i class="el-icon-refresh"></i> 调拨记录
          </el-button>
          <el-button type="warning" @click="EditSelected">
            <i class="el-icon-edit"></i> 编辑
          </el-button>
          <el-button type="info" @click="">
            <i class="el-icon-download" disabled></i> 导出货品信息
          </el-button>
          <el-button type="danger" @click="DeleteSelected">
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="goodsTableRef"
      >
        <el-table-column type="selection" width="55" />
         <el-table-column fixed prop="goodscoding" label="货品编码" width="180" >
      <template v-slot="scopt">
        <el-tag link type="primary" size="small" @click="GetGoods(scopt.row)">
          {{scopt.row.goodscoding  }}
        </el-tag>
      </template>
    </el-table-column>
        <el-table-column label="货品信息">
          <el-table-column prop="goodsname" label="货品名称" width="120" />
          <el-table-column prop="goodsstatus" label="货品状态" width="120">
            <template v-slot="scop">
              <el-tag type="warning" v-if="scop.row.goodsstatus == 1">未入库</el-tag>
              <el-tag type="success" v-if="scop.row.goodsstatus == 2">已入库</el-tag>
              <el-tag type="info" v-if="scop.row.goodsstatus == 3">已出库</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsspecifications"
            label="规格型号"
            width="120"
          />
          
          <el-table-column prop="goodsUnitName" label="货品单位" width="100" />
          <el-table-column prop="goodstyoeName" label="货品类型" width="100" />
          <el-table-column prop="vendorName" label="供应商" width="120" />
          <el-table-column prop="storageprice" label="供货价格" width="100" />
          <el-table-column
            prop="retrievalprice"
            label="出货参考价"
            width="120"
          />
          <el-table-column prop="num" label="供货数量" width="120" />
          <el-table-column prop="shelflife" label="保质期(月)" width="120" />
          <el-table-column prop="goodsbarcodes" label="条码" width="150" />
          <el-table-column prop="createtime" label="供货时间" width="160">
            <template v-slot="scop">
              <span>
                {{
                  moment(scop.row.createtime).format("YYYY-MM-DD")
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="productionTime"
            label="货品生产时间"
            width="160"
          >
            <template v-slot="scop">
              <span>
                {{
                  moment(scop.row.productionTime).format("YYYY-MM-DD")
                }}</span
              >
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
        <!-- 分页 -->
 <table>
    <tr>
        <td>
            <div class="demo-pagination-block">
                <el-pagination
                v-model:current-page="Page.pageindex"
                v-model:page-size="Page.pagesize"
                :page-sizes="[2, 3, 5, 10]"
                :size="Page.pagesize"
                :disabled="disabled"
                :background="background"
                layout="slot, sizes"
                :total="Page.totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                >
                一共{{ Page.totalcount }}条数据，当前第{{ Page.pageindex }}页，一共{{ Page.pagecount }}页
                </el-pagination>
            </div>
        </td>
         <td>
            <div class="demo-pagination-block">
                <el-pagination
                v-model:current-page="Page.pageindex"
                v-model:page-size="Page.pagesize"
                :page-sizes="[2, 3, 5, 10]"
                :size="Page.pagesize"
                :disabled="disabled"
                :background="background"
                layout=" prev, pager, next,slot"
                :total="Page.totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                prev-text="上一页"
                next-text="下一页"
                >
                <el-button @click="handleCurrentChange(1)">首页</el-button>
                </el-pagination>
            </div>
        </td>
         <td>
            <div class="demo-pagination-block">
                <el-pagination
                v-model:current-page="Page.pageindex"
                v-model:page-size="Page.pagesize"
                :page-sizes="[2, 3, 5, 10]"
                :size="Page.pagesize"
                :disabled="disabled"
                :background="background"
                layout="jumper,slot"
                :total="Page.totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                >
                <el-button @click="handleCurrentChange(Page.pagecount)">尾页</el-button>
                </el-pagination>
            </div>
        </td>
    </tr>
 </table>
    </el-card>
  </div>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import service from "@/utils/request";
//获取货品详细信息
const GetGoods=(row:any)=>{
  router.push({path:"/GetGoods_Details",query:{id:row.goodscoding}})
}
const router = useRouter();
onMounted(() => {
  getdata();
});
//显示分页----------------------------
// 表格多选相关
const selectedRows = ref<any[]>([]);
const goodsTableRef = ref();
const handleSelectionChange = (val: any[]) => {
  selectedRows.value = val;
};

// 编辑选中数据
const EditSelected = () => {
  if (selectedRows.value.length === 0) {
   ElMessage.warning('请先选中数据');
    return;
  }
  // 假设只编辑第一条
  const row = selectedRows.value[0];
  router.push({ path: '/AddGoods', query: { id: row.goodscoding } });
};

// 删除选中数据
const DeleteSelected = () => {
  if (selectedRows.value.length === 0) {
     ElMessage.warning('请先选中数据');
    return;
  }
  if (confirm('确定要删除选中的数据吗？')) {
    const ids = selectedRows.value.map(row => row.goodscoding);
    service.delete('/api/app/goods/'+ids+'/goods')
      .then(() => {
         ElMessage.success('删除成功');
        getdata();
      })
      .catch(() => {
         ElMessage.warning('删除失败');
      });
  }
};
const Page = reactive({
  pageindex: 1,
  pagecount: 0,
  pagesize: 10,
  totalcount: 0,
});
//分页--------------------------------------
const background = ref(true)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  Page.pagesize=val;
  getdata();
}
const handleCurrentChange = (val: number) => {
  Page.pageindex=val;
  getdata();
}
const tableData = ref([]);
const getdata = () => {
  const params: any = {
    Pageindex: Page.pageindex,
    Pagesize: Page.pagesize
  };
  
  // 只添加非空的查询参数
  if (formInline.name) params.goodsname = formInline.name;
  if (formInline.status) params.status = formInline.status;
  if (formInline.customid) params.verdorid = formInline.customid;
  if (formInline.productime) params.productiontime = formInline.productime;
  if (formInline.createtime) params.createtime = formInline.createtime.substring(0,10);
  
  service.get("/api/app/goods/goods-list", { params })
    .then((res) => {
      tableData.value = res.data.pageDatas;
      Page.pagecount=res.data.totalPage;
      Page.totalcount=res.data.totalData
    });
};

const formInline = reactive({
  name: "",
  customid: "",
  createtime: "",
  productime: "",
  status: "",
});

const Add = () => {
  router.push("/AddGoods");
};

const goToAllocate = () => {
  router.push("/Allocate");
};


// 定义供应商
interface GoodsVendor {
  wVendorcoding: string;
  wVendorname: string;
}
const goodsVendorList = ref<GoodsVendor[]>([]);

onMounted(async () => {
  try {
    const res = await service.get('/api/app/goods/w-vendors');
    if (Array.isArray(res.data)) {
      goodsVendorList.value = res.data;
    }
  } catch (e) {
    // 可以根据需要添加错误提示
    console.error('获取供应商列表失败', e);
  }
});

</script>

<style scoped>
.goods-page-bg {
  background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%);
  min-height: 100vh;
  padding: 32px;
}
.welcome-card {
  margin-bottom: 24px;
  background: linear-gradient(90deg, #409eff 0%, #53c0ff 100%);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.08);
}
.welcome-title {
  font-size: 26px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.theme-icon {
  font-size: 32px;
  margin-right: 12px;
}
.form-card,
.table-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.el-form-item__label {
  color: #409eff;
  font-weight: 500;
}
.el-table th {
  background: linear-gradient(90deg, #e3f0ff 0%, #b3e0ff 100%);
  color: #222;
  font-size: 15px;
}
.el-table {
  border-radius: 10px;
  overflow: hidden;
}
.el-button {
  border-radius: 20px;
  font-weight: 500;
  transition: box-shadow 0.2s;
}
.el-button:hover {
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}
.el-button--primary {
  background: linear-gradient(90deg, #409eff 0%, #53c0ff 100%);
  border: none;
}
.el-button--success {
  background: linear-gradient(90deg, #67c23a 0%, #95d475 100%);
  border: none;
}
.el-button--danger {
  background: linear-gradient(90deg, #f56c6c 0%, #f89898 100%);
  border: none;
}
.el-button--info {
  background: linear-gradient(90deg, #909399 0%, #b1b3b8 100%);
  border: none;
}
</style>
